<template>
	<view class="location-box">
		<view class="" :style="{height:paramsStore.statusBarHeight + 'px'}">
		</view>

		<view class="locationInfo" @click="getLocation">
			<u-icon name="map" :bold="true" size="" color="#000"></u-icon>
			<view>{{district}}</view>
			<view>{{township}}</view>
		</view>

	</view>
</template>

<script setup>
	import {
		paramasUserStore
	} from "@/store/params.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref,
		getCurrentInstance
	} from "vue"
	import {
		getAddress
	} from "../api/api";
	const paramsStore = paramasUserStore()
	//引入proxy
	const {
		proxy
	} = getCurrentInstance()
	onShow(() => {


	})
	const address = ref('这是天气定位')
	const district = ref("") //区
	const township = ref("") //街道/乡镇


	async function getAddr(latitude, longitude) {
		let key = "52fe0b5f5eca12ecda2d9abea3634deb" //高德key
		const {
			info,
			regeocode,
			infocode,
			status
		} = await getAddress({
			longitude: longitude,
			latitude: latitude,
			key: key
		})
		if (info != "OK") return proxy.$msg('定位解析失败，请重新获取位置信息')
		console.log('地址回调', regeocode);
		paramsStore.address = regeocode.formatted_address
		paramsStore.cityCode = regeocode.addressComponent.adcode
		address.value = regeocode.formatted_address
		district.value = regeocode.addressComponent.district
		township.value = regeocode.addressComponent.township


	}

	defineExpose({
		getAddr
	})
</script>


<style lang="scss" scoped>
	.location-box {
		height: 10vh;
		width: 100%;
		// position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		font-weight: bold;

		.locationInfo {
			display: flex;
			flex-direction: row;

			>view:nth-child(2) {
				margin-left: 5px;
			}

			>view:last-child {
				margin-left: 10px;
			}
		}

	}
</style>